<template>
  <div class="edit-menu">
    <a-modal
      :title="updateTitles"
      width="980px"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :maskClosable="false"
      :bodyStyle="{ overflow: 'auto', maxHeight: '70vh' }"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <a-spin :spinning="requestSpinning" tip="正在加载数据中...">
        <a-form :form="form" :label-col="{ span: 9 }" :wrapper-col="{ span: 14 }">
          <a-row :gutter="10">
            <a-col :span="12">
              <a-form-item label="父级菜单">
                <a-tree-select
                  v-decorator="['Pid', { initialValue: '0', rules: [{ type: 'string', required: true, message: '请选择父级菜单', whitespace: true, trigger: 'change' }] }]"
                  allowClear
                  show-search
                  treeNodeFilterProp="title"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :replaceFields="{
                    children: 'children',
                    title: 'name',
                    key: 'id',
                    value: 'id',
                  }"
                  :tree-data="parentTreeList"
                  placeholder="请选择父级菜单"
                  searchPlaceholder="输入菜单名称进行筛选"
                >
                </a-tree-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item>
                <template slot="label">
                  菜单标题
                  <a-tooltip placement="top" title="路由标题, 用于显示面包屑, 页面标题 例如：菜单管理（路由meta中的title值）">
                    <span><a-icon type="question-circle" /></span>
                  </a-tooltip>
                </template>
                <a-input
                  v-decorator="['Title', { initialValue: '', rules: [{ required: true, message: '请输入菜单标题!', whitespace: true, trigger: 'change' }] }]"
                  autocomplete="off"
                  placeholder="路由中的title值"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item>
                <template slot="label">
                  菜单名称
                  <a-tooltip placement="top" title="路由名称, 必须设置,且不能重名 例如: menu（路由中的name值）">
                    <span><a-icon type="question-circle" /></span>
                  </a-tooltip>
                </template>
                <a-input
                  v-decorator="['Name', {
                    initialValue: '',
                    rules: [
                      { required: true, message: '请输入菜单名称', whitespace: true, trigger: 'change' }
                    ]
                  }]"
                  placeholder="路由中的name值"
                  autocomplete="off"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="菜单图标">
                <a-input
                  v-decorator="['Icon', { initialValue: '' }]"
                  placeholder="请输入菜单图标">
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item>
                <template slot="label">
                  组件路径
                  <a-tooltip placement="top" title="菜单对应的具体vue页面文件路径views的下级路径, 例如: /system/menu/index 目录类型: 填写RouteView（路由中的component值）">
                    <span><a-icon type="question-circle" /></span>
                  </a-tooltip>
                </template>
                <a-input
                  v-decorator="['MenuUrl', {
                    initialValue: '',
                    rules: [
                      { required: false, message: '请输入组件路径!', whitespace: true, trigger: 'change' }
                    ]
                  }]"
                  autocomplete="off"
                  placeholder="路由中的component值" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item>
                <template slot="label">
                  路由路径
                  <a-tooltip placement="top" title="访问此页面自定义的url地址，建议/开头书写，例如: /system/menu（路由中的path值）">
                    <span><a-icon type="question-circle" /></span>
                  </a-tooltip>
                </template>
                <a-input
                  v-decorator="['Url', { initialValue: '', rules: [{ required: true, message: '请输入路由路径!', whitespace: true, trigger: 'change' }] }]"
                  autocomplete="off"
                  placeholder="路由中的path值" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item>
                <template slot="label">
                  权限标识
                  <a-tooltip placement="top" title="用于控制按钮是否显示">
                    <span><a-icon type="question-circle" /></span>
                  </a-tooltip>
                </template>
                <a-select
                  v-decorator="['PowerIdentifier', { initialValue: [] }]"
                  mode="multiple"
                  :maxTagCount="2"
                  placeholder="请选择权限标识"
                >
                  <a-select-option v-for="(item, index) in jurisdictionList" :key="index" :value="item.CLASSKEY">{{ item.CSMC }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item>
                <template slot="label">
                  菜单排序
                  <a-tooltip placement="top" title="根据序号升序排列">
                    <span><a-icon type="question-circle" /></span>
                  </a-tooltip>
                </template>
                <a-input-number
                  v-decorator="['RankingValue', { initialValue: '' }]"
                  placeholder="菜单排序值"
                  :min="0" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item>
                <template slot="label">
                  重定向地址
                  <a-tooltip placement="top" title="重定向地址, 访问这个路由时,自定义进行重定向（路由中的redirect值）">
                    <span><a-icon type="question-circle" /></span>
                  </a-tooltip>
                </template>
                <a-input
                  v-decorator="['RedirectOrNot', { initialValue: '' }]"
                  autocomplete="off"
                  placeholder="重定向地址" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item>
                <template slot="label">
                  显示在侧边栏
                  <a-tooltip placement="top" title="控制路由和子路由是否显示在侧边栏（路由meta中的show值）">
                    <span><a-icon type="question-circle" /></span>
                  </a-tooltip>
                </template>
                <a-select
                  v-decorator="['IFShowSidebar', { initialValue: 0, rules: [{ required: true, message: '请选择是否显示在侧边栏!' }] }]"
                  placeholder="是否显示在侧边栏"
                >
                  <a-select-option :value="0">是</a-select-option>
                  <a-select-option :value="1">否</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="启用菜单">
                <a-radio-group
                  v-decorator="['IsItEnabled', { initialValue: 0 }]"
                >
                  <a-radio :value="0">是</a-radio>
                  <a-radio :value="1">否</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { setMenus, getMenuSelect } from '@/api/system'
import { getParameterSelect } from '@/api/common'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    propsData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      confirmLoading: false,
      requestSpinning: false,
      form: this.$form.createForm(this, { name: 'editMenu' }),
      parentTreeList: [{
        name: '无',
        id: '0',
        key: '0',
        children: []
      }],
      jurisdictionList: []
    }
  },
  computed: {
    updateTitles: function () {
      const _type = this.propsData.type
      let _texts = null
      if (_type === 'add-menu') {
        _texts = '新增菜单'
      } else if (_type === 'add-sonMenu') {
        _texts = '新增子菜单'
      } else {
        _texts = '修改菜单'
      }
      return _texts
    }
  },
  watch: {
    propsData: function () {
      this.fetchMenu()
    }
  },
  methods: {
    fetchMenu () {
      const { propsData: { type, data }, form: { setFieldsValue }, $message } = this
      this.requestSpinning = true
      Promise.all([
        getMenuSelect(),
        getParameterSelect({ ClassKey: 'permissionIdentification' })
      ]).then(res => {
        this.parentTreeList[0].children = res[0].data
        this.jurisdictionList = res[1].data
        if (type === 'add-sonMenu') {
          this.$nextTick(function () {
            setFieldsValue({ Pid: data.ID })
          })
        }
        if (type === 'edit-menu') {
          const result = data
          this.$nextTick(function () {
            const { Pid, Title, Name, Icon, MenuUrl, Url, RankingValue, RedirectOrNot, IFShowSidebar, IsItEnabled, PowerIdentifier } = result
            setFieldsValue({
              Pid,
              Title,
              Name,
              Icon,
              MenuUrl,
              Url,
              RankingValue,
              RedirectOrNot,
              IFShowSidebar,
              IsItEnabled,
              PowerIdentifier: PowerIdentifier ? PowerIdentifier.split(',') : []
            })
          })
        }
      }).catch((err) => {
        $message.error(err)
      }).finally(() => {
        this.requestSpinning = false
      })
    },
    handleSubmit () {
      const { form: { validateFields }, propsData: { type, data }, $message } = this
      validateFields({ force: true }, (err, values) => {
        if (!err) {
          this.confirmLoading = true
          const submitData = Object.assign({}, values, {
            ID: '',
            PowerIdentifier: values.PowerIdentifier.join(',')
          })
          let states = 'add'
          if (type === 'edit-menu') {
            states = 'update'
            submitData.ID = data.ID
          }
          setMenus({
            state: states,
            powerinfo: submitData
          }).then(res => {
            if (res.code === 200) {
              $message.success('提交成功', 3)
              this.handleCancel()
              this.$parent.$parent.$refs.table.refresh()
            } else {
              $message.error('提交失败', 3)
            }
          }).catch((err) => {
            $message.error(err, 3)
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="less" scoped>
  /deep/.ant-input-number {
    width: 100%;
  }
</style>
